<template>
  <div>
    <div ref="ChartForOrder" style="width: 550px;height:400px;" class="orderdiv"></div>
    <div ref="mycustomer" style="width: 550px;height:400px;" class="orderdiv"></div>
    <div ref="myChart" style="width: 550px;height:400px;" class="orderdiv2"></div>
    <div ref="mymake" style="width: 550px;height:400px;" class="orderdiv2"></div>
  </div>
</template>

<script>
  export default {
    name: "index",
    data() {
      return {
        orderData: {
          omouth: [],
          oday: [],
          osum: [],
          onum: [],
        },
        xsPhoto: [],
        makePhoto: [],
        cusorder: {
          name: [],
          value: [],
        },
      }
    },
    methods: {
      getmake() {
        var make = this.echarts.init(this.$refs.mymake);
        var mymake = {
          title: {
            text: '本月工艺订单量占比',
            left: 'center',
            textStyle: {
              color: '#becc4a'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: this.makePhoto.sort(function (a, b) {
                return a.value - b.value;
              }),
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                },

                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function (idx) {
                  return Math.random() * 200;
                }
              },

            }
          ]
        };
        make.setOption(mymake);
      },
      getcustomer() {
        var cus = this.echarts.init(this.$refs.mycustomer);
        var customer = {
          title: {
            text: '客户订单量',
          },
          xAxis: {
            data: this.cusorder.name
          },
          yAxis: {},
          series: [{
            name: '',
            data: this.cusorder.value,
            type: 'bar',
          }]
        };
        cus.setOption(customer)
      },
      getOrderAndPrice() {
        var co = this.echarts.init(this.$refs.ChartForOrder);
        var option = {
          title: {
            text: '',
            subtext: '真实数据'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['订单数量', '订单金额']
          },
          toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: {readOnly: false},
              magicType: {type: ['line', 'bar']},
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.orderData.oday//显示日期
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value}'
            }
          },
          series: [
            {
              name: '订单数量',
              type: 'line',
              data: this.orderData.onum,//订单数量
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              }
            },
            {
              name: '订单金额',
              type: 'line',
              data: this.orderData.osum,//订单金额
              markPoint: {
                data: [
                  {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'},
                  [{
                    symbol: 'none',
                    x: '90%',
                    yAxis: 'max'
                  }, {
                    symbol: 'circle',
                    label: {
                      position: 'start',
                      formatter: '最大值'
                    },
                    type: 'max',
                    name: '最高点'
                  }]
                ]
              }
            }
          ]
        };
        co.setOption(option);
      },
      getone() {
        var my = this.echarts.init(this.$refs.myChart);
        var option = {
          title: {
            text: '销售当月订单量',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: this.xsPhoto.name
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: this.xsPhoto,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        my.setOption(option);
      },
    },
    mounted() {
      this.$http.post("/order/getOrderAndPrice").then((res) => {
        debugger
        this.orderData.omouth = res.data.result.omouth;
        this.orderData.oday = res.data.result.oday;
        this.orderData.osum = res.data.result.osum;
        this.orderData.onum = res.data.result.onum;
        this.getOrderAndPrice();//获取图形
      }),
        this.$http.get("/order/getmake").then((res) => {
          this.makePhoto = res.data.result
          this.getmake();
        }),
        this.$http.get("/order/getcustomer").then((res) => {
          this.cusorder.name = res.data.result.name;
          this.cusorder.value = res.data.result.value;
          this.getcustomer();

        }),
        this.$http.get("/order/xsPhoto").then((res) => {
          this.xsPhoto = res.data.result
          this.getone();
        })
    }
  }
</script>

<style scoped>
  .orderdiv {
    display:inline-block;/*并排显示*/
    float:left;/*左浮动*/
    padding:20px;/*间隔距离*/
    background: #f9fafc;
  }
  .orderdiv2 {
    display:inline-block;/*并排显示*/
    float:left;/*左浮动*/
    padding:20px;/*间隔距离*/
    background: #f9fafc;
  }

</style>
